<!--
 * @Description: 任务执行记录
 * @Author: Pengfei Zhang
 * @Date: 2021-09-13 16:21:01
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-14 11:21:08
-->

<template>
  <view class="content-base">
    <NoData v-if="recordList.length === 0"/>
    <view class="record-item-wrapper" v-if="recordList.length !== 0">
      <view v-for="(item,index) in recordList" :key="index">
        <view class="record-item co-item" v-if="item.type === 1">
          <view class="record-item-title">{{getRecordType(item.type)}}</view>
          <view v-for="(i, coIndex) in item.communicationList" :key="coIndex" class="communication-item">
            <view class="record-item-date-wrapper">
              <view class="record-item-date-icon" :class="i.type === 1 ? 'question' : 'answer' "><view class="icon-text">{{getCommunicationType(i.type)}}</view></view>
              <text class="record-item-date">{{i.date}}</text>
            </view>
            <text class="record-item-content">{{i.content}}</text>
          </view>
        </view>
        <view class="record-item" v-if="item.type === 2">
          <text class="record-item-title">{{getRecordType(item.type)}}</text>
          <text class="record-item-date">{{item.date}}</text>
          <text class="record-item-content">{{item.content}}</text>
        </view>
        <view class="record-item" v-if="item.type === 3">
          <text class="record-item-title">{{getRecordType(item.type)}}</text>
          <text class="record-item-date">{{item.date}}</text>
          <text class="record-item-content">{{item.content}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NoData from './no-data.vue'

export default {
  components:{
    NoData,
  },
  data(){
    return {
      recordList: [
        {
          type:1, // 1:疑问反馈 2:任务状态变更 3:负责人变更
          communicationList:[
            {
              type:1, // 1:反馈 2:回答
              date:'2021/12/12 12:12:12',
              content:'无法按时抵达仓库，请指挥部安排其他人处理'
            },{
              type:2,
              date:'2021/12/12 12:12:12',
              content:'收到请求，已经交派其他救援人员，当前任务稍后取消',
            }
          ]
        }, {
          type:2,
          date:'2021/12/12 12:12:12',
          content:'任务状态已经变更为“已取消”'
        }, {
          type:3,
          date:'2021/12/12 12:12:12',
          content:'当前任务负责人已更改为“黄小柔（单位名称）”'
        }
      ]
    }
  },
  methods:{
    getRecordType(val) {
      const typeList = {
        1:'疑问反馈', 
        2:'任务状态变更', 
        3:'负责人变更'
      }
      return typeList[val]
    },
    getCommunicationType(val) {
      const typeList = {
        1:'Q', 
        2:'A', 
      }
      return typeList[val]
    }
  }
}
</script>

<style lang="scss" scoped>
.content-base {
  padding: 0 32rpx;

  .no-data-wrapper{
    display: flex;
    align-items: center;
    height:650rpx;
    width:100%;

    .no-data{
      height:270rpx;
      width:100%;
      background: url('@/static/images/notFound.png') left center;
      background-size:contain;
      font-family: "Microsoft YaHei Bold";
      font-weight: bold;
      font-size: 30rpx;
      line-height: 39rpx;
      text-align: center;
      color: #b3d8ff;
    }
  }

  .record-item-wrapper{
    display:flex;
    flex-direction: column;

    .co-item{
      padding:0 !important;
    }

    .record-item{
      display:flex;
      flex-direction: column;
      border-bottom:1px solid rgba(43, 43, 43, .1);
      padding-bottom:30rpx;
      margin-top:10rpx;

      .record-item-title{
        font-family: "Source Han Sans CN Medium";
        font-weight: 500;
        font-size: 30rpx;
        line-height: 48rpx;
        text-align: left;
        color: #2b2b2b;
        margin-bottom:30rpx;
      }

      .communication-item{
        margin-bottom:30rpx;
      }
      
      .record-item-date{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 24rpx;
        line-height: 42rpx;
        text-align: left;
        color: #1d1f24;
        opacity: 0.5;
        margin-bottom:10rpx;
      }

      .record-item-content{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 42rpx;
        text-align: left;
        color: #1d1f24;
      }

      .record-item-date-wrapper{
        display:flex;
        align-items: center;
        margin-bottom:20rpx;

        .record-item-date{
          margin:0;
        }

        .question{
          background: #ff8b7c;
        }

        .answer{
          background: #5A8EFF;
        }

        .record-item-date-icon{
          width: 24rpx;
          height: 24rpx;
          border-radius: 6rpx;
          font-family: "Microsoft YaHei";
          font-weight: normal;
          line-height: 22rpx;
          color: #fff;
          margin-right:8rpx;

          .icon-text{
            font-size: 24rpx;
            transform:scale(.5);
          }
        }
      }
    }
  }
}
</style>